Next.jsのBuild Sizeを計測する

$ npm install -D @next/bundle-analyzer

code:next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({

enabled: process.env.ANALYZE === 'true',

})

const config = { .. } // 他の設定

module.exports = withBundleAnalyzer(config)

$ ANALYZE=true yarn build

自動的にブラウザが開いて見れる

設定にも依るとは思う

server側もある

./.next/analyze/server.html

上記のコードで「他の設定」をwithBundleAnalyzerに入れなかったら、next.config.jsに書いた設定を無視してAnalyze結果を見れる

だから両方試せばそこに追記したwebpackの設定などがどこまで効果あるか確認できる

code:next.config.js

const withBundleAnalyzer = ..

const config = { .. } // 他の設定

module.exports = config // withBundleAnalyzerしない

緑、黄、赤でヤバさを教えてくれる

下の方に「First Load JS shared by all」という項目がある

内訳が出ている

ここに書かれているやつは全てのページでロードされる

全てのページで必要な共有ファイル

code:aaa

+ First Load JS shared by all 300 kB

├ chunks/0eceb729.51e01a.js 2.08 kB

...

├ chunks/framework.570f60.js 40.6 kB

├ chunks/main.dbe6c6.js 7.19 kB

├ chunks/pages/_app.d851a7.js 2.6 kB

└ chunks/webpack.1c8d92.js 5.53 kB

localでbuildしてLighthouseして、

名前はハッシュなので無理

production buildしてlocalで起動して、lighthouseしたらいけるか？

参考